<template>
	<div id="Combat">
		<div class="header">
			<div class="wrap clear">
				<a class="icon1" href="/">
				
					<img src="https://coding.imooc.com/static/module/index/img/header-icon1.png" />
				</a>
				<div class="banner"><img src="https://coding.imooc.com/static/module/index/img/header-icon-recommended.png?222" /></div>
				<div class="search">
					<div class="clear">
						<input class="search-input" placeholder="搜索感兴趣的实战课程内容" type="text" autocomplete="off" data-suggest-trigger="true" />
						<a href="javascript:;" class="search-button" data-search-btn="true"><i class="el-icon-search"></i></a>
					</div>

					<div class="search-hot clear">
						<span>热搜：</span>
						<a target="_blank" href="https://www.imooc.com/search/?words=Vue&amp;type=course">Vue</a>
						<a target="_blank" href="https://www.imooc.com/search/?words=Python&amp;type=course">Python</a>
						<a target="_blank" href="https://www.imooc.com/search/?words=Java&amp;type=course">Java</a>
						<a target="_blank" href="https://www.imooc.com/search/?words=flutter&amp;type=course">flutter</a>
						<a target="_blank" href="https://www.imooc.com/search/?words=springboot&amp;type=course">springboot</a>
						<a target="_blank" href="https://www.imooc.com/search/?words=docker&amp;type=course">docker</a>
						<a target="_blank" href="https://www.imooc.com/search/?words=React&amp;type=course">React</a>
						<a target="_blank" href="https://www.imooc.com/search/?words=小程序&amp;type=course">小程序</a>
					</div>
				</div>
			</div>
		</div>

		<div class="shizhan-header-nav">
			<div class="clear">
				<a href="/" id="cato" class="cur">全部</a>
				<a href="/?c=fe" class="" data-ct="fe">前端开发</a>
				<a href="/?c=be" class="" data-ct="be">后端开发</a>
				<a href="/?c=mobile" class="" data-ct="mobile">移动开发</a>
				<a href="/?c=algorithm" class="" data-ct="algorithm">计算机基础</a>
				<a href="/?c=nt" class="" data-ct="nt">前沿技术</a>
				<a href="/?c=cb" class="" data-ct="cb">云计算&amp;大数据</a>
				<a href="/?c=op" class="" data-ct="op">运维&amp;测试</a>
				<a href="/?c=data" class="" data-ct="data">数据库</a>
				<a href="/?c=photo" class="" data-ct="photo">UI设计&amp;多媒体</a>
			</div>
		</div>

		<div class="shizhan-skill-placeholder">
			<div class="shizhan-skill-wrapper">
				<div class="shizhan-skill clearfix">
					<a href="/" class="on">不限</a>
					<a href="/?c=net" data-ct="net" class="">.net</a>
					<a href="/?c=tyscript" data-ct="tyscript" class="">Typescript</a>
					<a href="/?c=pcnetwork" data-ct="pcnetwork" class="">计算机网络</a>
					<a href="/?c=html" data-ct="html" class="">HTML/CSS</a>
					<a href="/?c=javascript" data-ct="javascript" class="">JavaScript</a>
					<a href="/?c=vuejs" data-ct="vuejs" class="">Vue.js</a>
					<a href="/?c=reactjs" data-ct="reactjs" class="">React.JS</a>
					<a href="/?c=angular" data-ct="angular" class="">Angular</a>
					<a href="/?c=nodejs" data-ct="nodejs" class="">Node.js</a>
					<a href="/?c=webapp" data-ct="webapp" class="">WebApp</a>
					<a href="/?c=miniprogram" data-ct="miniprogram" class="">小程序</a>
					<a href="/?c=fetool" data-ct="fetool" class="">前端工具</a>
					<a href="/?c=java" data-ct="java" class="">Java</a>
					<a href="/?c=springboot" data-ct="springboot" class="">SpringBoot</a>
					<a href="/?c=springcloud" data-ct="springcloud" class="">Spring Cloud</a>
					<a href="/?c=ssm" data-ct="ssm" class="">SSM</a>
					<a href="/?c=php" data-ct="php" class="">PHP</a>
					<a href="/?c=python" data-ct="python" class="">Python</a>
					<a href="/?c=crawler" data-ct="crawler" class="">爬虫</a>
					<a href="/?c=django" data-ct="django" class="">Django</a>
					<a href="/?c=flask" data-ct="flask" class="">Flask</a>
					<a href="/?c=go" data-ct="go" class="">Go</a>
					<a href="/?c=swoole" data-ct="swoole" class="">Swoole</a>
					<a href="/?c=c" data-ct="c" class="">C</a>
					<a href="/?c=cplusplus" data-ct="cplusplus" class="">C++</a>
					<a href="/?c=csharp" data-ct="csharp" class="">C#</a>
					<a href="/?c=android" data-ct="android" class="">Android</a>
					<a href="/?c=ios" data-ct="ios" class="">iOS</a>
					<a href="/?c=reactnative" data-ct="reactnative" class="">React native</a>
					<a href="/?c=algorithmds" data-ct="algorithmds" class="">算法与数据结构</a>
					<a href="/?c=maths" data-ct="maths" class="">数学</a>
					<a href="/?c=bigdata" data-ct="bigdata" class="">大数据</a>
					<a href="/?c=hadoop" data-ct="hadoop" class="">Hadoop</a>
					<a href="/?c=spark" data-ct="spark" class="">Spark</a>
					<a href="/?c=hbase" data-ct="hbase" class="">Hbase</a>
					<a href="/?c=flink" data-ct="flink" class="">Flink</a>
					<a href="/?c=storm" data-ct="storm" class="">Storm</a>
					<a href="/?c=aliyun" data-ct="aliyun" class="">阿里云</a>
					<a href="/?c=docker" data-ct="docker" class="">Docker</a>
					<a href="/?c=kubernetes" data-ct="kubernetes" class="">Kubernetes</a>
					<a href="/?c=dba" data-ct="dba" class="">运维</a>
					<a href="/?c=oma" data-ct="oma" class="">自动化运维</a>
					<a href="/?c=zjj" data-ct="zjj" class="">中间件</a>
					<a href="/?c=linux" data-ct="linux" class="">Linux</a>
					<a href="/?c=test" data-ct="test" class="">测试</a>
					<a href="/?c=gntest" data-ct="gntest" class="">功能测试</a>
					<a href="/?c=xntest" data-ct="xntest" class="">性能测试</a>
					<a href="/?c=zdhtest" data-ct="zdhtest" class="">自动化测试</a>
					<a href="/?c=jktest" data-ct="jktest" class="">接口测试</a>
					<a href="/?c=mysql" data-ct="mysql" class="">MySQL</a>
					<a href="/?c=redis" data-ct="redis" class="">Redis</a>
					<a href="/?c=mongodb" data-ct="mongodb" class="">MongoDB</a>
					<a href="/?c=sqlserver" data-ct="sqlserver" class="">SQL Server</a>
					<a href="/?c=wff" data-ct="wff" class="">微服务</a>
					<a href="/?c=blockchain" data-ct="blockchain" class="">区块链</a>
					<a href="/?c=machine" data-ct="machine" class="">机器学习</a>
					<a href="/?c=deep" data-ct="deep" class="">深度学习</a>
					<a href="/?c=pcvision" data-ct="pcvision" class="">计算机视觉</a>
					<a href="/?c=nlp" data-ct="nlp" class="">自然语言处理</a>
					<a href="/?c=datafxwj" data-ct="datafxwj" class="">数据分析&amp;挖掘</a>
					<a href="/?c=uijc" data-ct="uijc" class="">设计基础</a>
					<a href="/?c=uitool" data-ct="uitool" class="">设计工具</a>
					<a href="/?c=uiapp" data-ct="uiapp" class="">APPUI设计</a>

					<div style="clear:both"></div>
				</div>
			</div>
			
		</div>

		<CombatList />
		<div class="cen">			
			<classinfointroduce :dataList="curriculumList" />
			
		</div>
		<div class="center">
			<el-pagination
			  background
			  layout="prev, pager, next"
			  :total="1000">
			</el-pagination>
		</div>

	</div>
</template>

<script>
import CombatList from '../components/CombatList.vue';
import classinfointroduce from '../components/classInfoIntroduce.vue';
import Detalis from '../components/Details.vue';



export default {
	components: {
		CombatList,
		classinfointroduce,

	},
	data() {
		return {
			curriculumList: [
				{
					id: 10001,
					className: '',
					courseStat: '成长体系课',
					classPic: 'https://img.mukewang.com/szimg/5ecb294109cd2c8606000338.jpg',
					author: '移动端架构师讲师团',
					authorPic: 'https://img.mukewang.com/user/5ec4f8b00001d08101600160-100-100.jpg',
					classTitle: '移动端架构师成长体系课',
					classRank: '入门',
					viewsNumber: 1580,
					classDesc: '技术视野+架构能力+大厂经验，亲历架构演进过程',
					price: '3999.00',
					originalPrice: '5388.00',
					free: false,
					evaluate: '8'
				},
				{
					id: 10002,
					className: '',
					courseStat: '',
					classPic: 'https://img1.sycdn.imooc.com/szimg/5c0493ce000126b106000338-360-202.jpg',
					author: '',
					authorPic: '',
					classTitle: '用技术打造小程序简历',
					classRank: '入门',
					viewsNumber: 2333,
					classDesc: '',
					price: '1.00',
					originalPrice: '',
					free: true,
					evaluate: ''
				},
				{
					id: 10003,
					className: '',
					courseStat: '',
					classPic: 'https://img1.sycdn.imooc.com/szimg/5c0493ce000126b106000338-360-202.jpg',
					author: '',
					authorPic: '',
					classTitle: '用技术打造小程序简历',
					classRank: '入门',
					viewsNumber: 2333,
					classDesc: '',
					price: '1.00',
					originalPrice: '',
					free: false,
					evaluate: ''
				},
				{
					id: 10004,
					className: '',
					courseStat: '',
					classPic: 'https://img1.sycdn.imooc.com/szimg/5c0493ce000126b106000338-360-202.jpg',
					author: '',
					authorPic: '',
					classTitle: '用技术打造小程序简历',
					classRank: '入门',
					viewsNumber: 2333,
					classDesc: '',
					price: '1.00',
					originalPrice: '',
					free: false,
					evaluate: ''
				}
			],
			CombatHeaderList: [{}]
		};
	}
};
</script>

<style>
	@import url('https://unpkg.com/element-ui/lib/theme-chalk/index.css');
	@import url('../assets/css/util.css');
	
#Combat a:hover{
	color:#fff;
	background-color:#D9DDE1;
}	
#Combat .center{
	margin:20px auto;
}
#Combat .clear {
	content: '\0020';
	display: block;
	height: 0;
	clear: both;
}
.header {
	height: 132px;
	background: url(https://coding.imooc.com/static/module/index/img/sz-header-bk.png) no-repeat;
	background-size: cover;
	box-sizing: border-box;
}
.header .wrap {
	width: 1152px;
	margin-left: auto;
	margin-right: auto;
	/* visibility: hidden; */
}
.header .wrap .icon1 {
	float: left;
	width: 196px;
	height: 96px;
	overflow: hidden;
	margin-top: 17px;
	/* visibility: hidden; */
}
.header .wrap .icon1 img {
	width: 100%;
	height: 100%;
}
.header .wrap .banner {
	height: 96px;
	/* min-width: 48px; */
	/* max-width: 360px; */
	overflow: hidden;
	cursor: pointer;
	position: relative;
	z-index: 899;
	margin-left: 24px;
	margin-top: 17px;
	display: none;
	float: left;
	display: block;
}
.header .wrap .banner img {
	cursor: default;
	width: 116px;
}
.header .wrap .search {
	float: right;
	position: relative;
	width: 560px;
	height: 48px;
	margin: 36px auto 0;
	background: #fff;
	border-radius: 8px;
}
.header .wrap .search .search-input {
	float: left;
	width: 512px;
	height: 48px;
	padding: 0 16px;
	font-size: 16px;
	color: #07111b;
	line-height: 48px;
	box-sizing: border-box;
	border-radius: 8px 0 0 8px;
	border: none;
	outline: none;
}
.header .wrap .search .search-button {
	float: left;
	background: #c80;
	width: 48px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	border-radius: 0 8px 8px 0;
}
.header .wrap .search .search-button i {
	font-size: 24px;
	color: #fff;
	line-height: 48px;
}
.header .wrap .search .search-hot {
	margin-top: 60px;
}
.header .wrap .search .search-hot span {
	margin-right: 12px;
	float: left;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 18px;
	transition: 0.3s all linear;
}
.header .wrap .search .search-hot a {
	margin-right: 24px;
	float: left;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 18px;
	transition: 0.3s all linear;
}

/* 实战选项卡1 */
.shizhan-header-nav {
    height: 72px;
    background: #fff;
    box-shadow: 0 8px 16px 0 rgba(28,31,33,.1);
    padding: 16px 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
.shizhan-header-nav>div {
    width: 1152px;
    padding-left: 12px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
.shizhan-header-nav a.cur {
    color: #c80;
}
.shizhan-header-nav a {
    float: left;
    font-size: 16px;
    color: #07111b;
    line-height: 40px;
    height: 40px;
    position: relative;
    margin-right: 46px;
    font-weight: 700;
}
.shizhan-header-nav a:last-child {
    margin-right: 0;
}

/* 实战选项卡2 */
.shizhan-skill-placeholder {
    width: 100%;
    padding: 24px 0 10px;
    position: relative;
}
.shizhan-skill-wrapper {
    width: 100%;
    max-height: 132px;
    overflow: hidden;
    background: #f8fafc;
}
.shizhan-skill {
    width: 1152px;
    margin: 0 auto;
}
.shizhan-skill a.on {
    color: #c80;
    background: rgba(204,136,0,.1);
}

.shizhan-skill a {
    float: left;
    margin-right: 20px;
    padding: 0 12px;
    font-size: 14px;
    color: #4d555d;
    line-height: 32px;
    border-radius: 6px;
    margin-bottom: 12px;
}



/* 实战列表 */
#Combat .cen{
	display:flex;
	justify-content:center;
	
}
#Combat .cen #classInfoIntroduce .curriculum {
    width: 270px;
	
}
#Combat .cen #classInfoIntroduce .curriculumPic{
	height:148px;
}
#Combat .cen #classInfoIntroduce .author{
	    /* position: absolute; */
	    left: 16px;
	    right: 16px;
	    bottom: 16px;
	    height: 36px;
}
#Combat .cen #classInfoIntroduce .author img{
	float: left;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 12px;
}
#Combat .cen #classInfoIntroduce .author span{
	white-space: nowrap;
	text-shadow: 0 2px 4px rgba(7,17,27,.5);
	    font-weight: 700;
		font-size: 14px;
}
</style>
